<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户反馈</title>
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./landing.css">

</head>
<body>
<!-- 顶部 -->
<div class="top-bg">
    <div class="top-center">
        <h5 class="top-left">西南民族大学—民族文化网</h5>
    </div>
</div>
<!-- 标题部分 -->
<div class="title">
    <div class="title1">
        <h2>西南民族大学-民族文化网</h2>
    </div>
    <div class="title1">
        <h2>SMU-National Culture Website</h2>
    </div>
</div>
<!-- 邮箱反馈界面 -->
<div class="top">
    <h1>反馈信箱</h1>
    <h5>您的建议我们将第一时间反馈</h5>
</div>
<!-- 输入个人信息 -->
<form th:action="@{/submitService}" method="post" onsubmit="return check()">
    <div class="put">
        姓（First name）: <input type="text" name="firstName" id="firstName">
    </div>
    <div class="put1">
        名（Last name）: <input type="text" name="lastName"><br>
    </div>
    <div class="put1">
        邮箱地址（Email）: <input type="text" name="mail"><br><br>
        标题（title）: <input type="text" name="title">
        <label>
            <select name="manager">
                <option value ="lht">卢慧婷</option>
                <option value ="xza">徐子傲</option>
                <option value="lsr">罗仕瑞</option>
                <option value="hjt">何佳涛</option>
                <option value="ls">刘淑</option>
            </select>
        </label>
        <br>
    </div>

    <div class="put2">
        <h5>请输入您想要反馈的问题的问题，我们将第一时间进行记录</h5>
        <textarea rows="10" cols="80" name="information">
        </textarea>
        <br>
        <input type="submit" value="确定" size="200" id="sub" style="width:100px;height:40px"><br><br><br><br><br>
        <font color="red">tips:标题后面的下拉选框是选择发给哪位管理员，选择后该管理员会收到反馈邮件</font>
    </div>

</form>
<script type="text/javascript">
    function check(){
        const reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
        const firstname = document.getElementsByName("firstName")[0];
        const email = document.getElementsByName("mail")[0];
        const information = document.getElementsByName('information')[0];
        if(firstname.value === "") {
            alert("姓不能为空!");
            return false;
        } else if(email.value === ""){
            alert("邮箱地址不能为空");
            return false;
        } else if(information.value === "") {
            alert("详细信息不能为空!");
            return false;
        } else if(!reg.test(email.value)){
            alert("邮箱格式不正确");
            return false;
        } else {
            alert("反馈成功！")
        }
    }
</script>
</body>
</html>